{% extends "baseD.html" %}

{% block headtitle %}- All Scenes{% endblock %}

{% block css %}
	<link href="/live3dstatic/css/viewAll.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}

{% block scripts %}
	<script type="text/javascript">
		function toggleSearchBox() {
			var sbox = document.getElementById('searchstring');

			if ( sbox.value == "Search for..." ) {
				sbox.value = "";
				sbox.style.color = "#333333";
				expandSearchOptions();
			} else if ( sbox.value == "" ) {
				sbox.style.color = "#999999";
				sbox.value = "Search for...";
			} else {
				sbox.style.color = "#333333";
				expandSearchOptions();
			}
		}
		function expandSearchOptions() {
			var rcont = document.getElementById('radiocontainer');
			var topbar = document.getElementById('topbar');

			rcont.style.display = "block";
			topbar.style.margin = "0 0 -20px 0";
		}
	</script>
{% endblock %}

{% block onload %} {% endblock %}

{% block divtitle %}- All Scenes{% endblock %}

{% block content %}
	<div id="contentpage">
		<div id="topbar">
			<div id="titlebox">
				<span class="title">Project Live 3D - View All Scenes</span>
				{% ifequal issearch 1 %}
					<span id="searchTitle">{{searchmessage}}</span>
				{% endifequal %}
			</div>
			<div id="searchbox">
				<form name="searchf" id="searchf" action="/viewAll" method="get">
					<input type="text" id="searchstring" name="searchstring" value="Search for..." onfocus="toggleSearchBox()" onblur="toggleSearchBox()" />
					<input type="submit" id="searchstringsubmitbutton" value="Go">
				</form>
			</div><!-- end searchbox -->
			<div style="clear:both;"></div>
		</div>
		<br/>

		{% ifequal error 1 %}
			<div id="errordiv">
				{{errormessage}}
			</div>
		{% else %}
			{% for scene in scenes %}
				<a href="viewScene?scene={{scene.index}}">
					<div class="group">
						<div class="imageshadow">
							{% ifnotequal scene.firstImage  "-1" %}
								<img src='/renderOriginalImage/{{scene.index}}.jpg' alt="" class="smallimage" />
							{% else %}
								<img src='{{scene.url}}' alt="" class="smallimage" />
							{% endifnotequal %}
						</div><!-- end imageshadow -->
						
						<div class="infocontainer">
							<div class="sceneInfo">
								<h3>{% if scene.name %}
									{{scene.name}}
								{% endif %}</h3>
								<p>Calibrated: 
								{% if scene.calibrated %}
									<span class="yes"> Yes </span>
								{% else %}
									<span class="no"> No </span>
								{% endif %}</p>
								<p>Scene index: {{scene.index}}
								</p>
								
								<p>{% if scene.amosId %}
									AMOS Camera {{scene.amosId}}
								{% else %}
									&nbsp;
								{% endif %}</p>
							</div><!-- end sceneInfo -->
							
							<div class="rating">
								<p>
								{% if scene.ratingAverage %}
									{% for star in scene.stars %}
										{% if star %}
											<div class="star_on"></div>
										{% else %}
											<div class="star_off"></div>
										{% endif %}
									{% endfor %}<br/></p>
									<p>{{ scene.ratingCount }} vote{{ scene.ratingCount|pluralize }}</p>
								{% endif %}
							</div><!-- end rating -->
							<div style="clear:both;"></div>
						</div><!-- end infocontainer -->
					</div><!-- end group -->
				</a>
			{% endfor %}
			<div id="pagebox">
				{% for page in firstGroup %}
					<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
				{% endfor %}
				{% if prevEllipsis %} ... {% endif%}
				{% for page in prev %}
					<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
				{% endfor %}
				<p id="chosenpagenum">{{thisPage }}</p>
				{% for page in next %}
					<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
				{% endfor %}
				{% if nextEllipsis %} ... {% endif %}
				{% for page in lastGroup %}
					<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
				{% endfor %}
			</div> <!-- end pagebox -->
		{% endifequal %}
	</div><!-- end bigpage -->
{% endblock %}
		
{% block scripts2 %} {% endblock %}